<style type="text/css">
	.show {display:block;}
	.hide {display:none;}	
/*------------------POPUPS------------------------*/
div.widget {
height:240px;
margin:0 auto;
padding:0;
position:relative;
width:373px;
}

#fade {
	display: none;
	background: #aaa;
	position: fixed; left: 0; top: 0; 
	width: 100%; height: 100%;
	opacity: .30;
	z-index: 9999;
}
.popup_block{
	display: none;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
}

/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}
</style>

<!--[if IE 7]>
<style type="text/css">
#fade {
	position: relative; left: 0; top: 0; 
}
#widget { line-height:80px; }
</style>
<![endif]-->
<script>
	function toggle_more(id){
		if ($("#toggle_"+id).html()=="+ View more"){
			$(".group_"+id).removeClass('hide');
			$(".group_"+id).addClass('show');
			$("#toggle_"+id).html("- View less");
		}else{
			$(".group_"+id).removeClass('show');
			$(".group_"+id).addClass('hide');
			$("#toggle_"+id).html("+ View more");
		}
	}
	
</script>


<script type="text/javascript">
$(document).ready(function(){
						   		   
	//When you click on a link with class of poplight and the href starts with a # 
		var popID = 'popup1'; //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
				
		//Fade in the Popup and add close button
		/*$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');*/
		$('#' + popID).fadeIn();
		
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
		
	
	//Close Popups and Fade Layer
	$('#close').click(function(){ //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
		}); //fade them both out
		
		return false;
	});

});
	

</script>

<div id="dashboard">

<h2>Home</h2>
 
<div class="section">
<h3>Welcome to YesUp central account system.</h3>

<div class="demo-frame1" id="droppable1">		

	<ul id="sortable1">
	<li><p>What you can do from your YesUp central account?</p></li>
	<li><p>-  Access all of your services through one account.</p></li>
	<li><p>-  Transfer funds between your subscribed services.</p></li>
	<li><p>-  Centralize  all important messages in one place.</p></li>
	<li><p><a href="/client/" class="grey-btn"><b class="ui-title">Go to my account</b></a></p></li>
	</ul>

</div>
 
</div>


<div class="section">
<div style="margin-left:50px;">
<h3>All YesUp services:</h3>

<div class="demo-frame1" id="droppable2">		

	<ul>
	<?php 
	foreach($this->all_groups as $key => $value ){
		echo '<li style="margin:0;padding:0;"><b>Group '.$value['group_id'].': '.$value['group_name'].'</b></li>';
	
		$group_items=0;
		$more_flag=false;
		foreach($this->all_services as $index => $item ){
			if ($item['group_id']==$value['group_id']){
				$group_items++;
				$group_class = "";
				//if (($group_items>2)and(!$more_flag)){
				if ($group_items>2){
					$more_flag=true;
					$group_class = "group_".$value['group_id']." hide";
					//echo '<div id="group_'.$value['group_id'].'" style="display:none;">';
				}
								
				echo '<li id="'.$item['icon'].'" class="draggable2 '.$group_class.'" style="cursor:pointer;"><div id="'.$item['icon'].'_div"  onclick="window.open(\''.$item['service_url'].'\');"><a href="#">'.$item['dpt_name'].'</a>-<b>'.$item['title'].'</b><span id="'.$item['icon'].'_span"></span><p>'.$item['description'].'.</p></div></li>';
			}
		}
		if ($more_flag){
			//echo '</div><div id="toggle_'.$value['group_id'].'" onclick="toggle_more(\''.$value['group_id'].'\');" style="font-weight:bold;margin:0 0 20px 50px;cursor:pointer;">+ View more services of this group</div>';
			echo '<li id="toggle_'.$value['group_id'].'" onclick="toggle_more(\''.$value['group_id'].'\');" style="font-weight:bold;margin:0;cursor:pointer;">+ View more</li>';
		}
				
	}
	?>
	</ul>

</div>
 </div>
 
</div>


</div>




<div align="center" style="width:100%;">
<div id="popup1" class="popup_block">
<div class="rpxnow_lightbox_container" style="position: relative; display: block; padding: 10px;  width: 373px; height: 265px; visibility: visible;">

<div style="position: absolute; width: 20px; height: 20px; background-image: url(&quot;/images/corners.png&quot;); top: 0pt; left: 0pt;"></div>
<div style="position: absolute; background-image: url(&quot;/images/border.png&quot;); top: 0pt; left: 20px; width: 353px; height: 20px;"></div>
<div style="position: absolute; width: 20px; height: 20px; background-image: url(&quot;/images/corners.png&quot;); top: 0pt; right: 0pt; background-position: right top;"></div>
<div style="position: absolute; width: 20px; height: 20px; background-image: url(&quot;/images/corners.png&quot;); bottom: 0pt; left: 0pt; background-position: 0pt -20px;"></div>
<div style="position: absolute; background-image: url(&quot;/images/border.png&quot;); bottom: 0pt; left: 20px; width: 353px; height: 20px;"></div>
<div style="position: absolute; width: 20px; height: 20px; background-image: url(&quot;/images/corners.png&quot;); bottom: 0pt; right: 0pt; background-position: -20px -20px;"></div>
<div style="position: absolute; background-image: url(&quot;/images/border.png&quot;); top: 20px; left: 0pt; width: 393px; height: 245px;"></div>
<div style="position: relative; background-color: transparent; background-image: url(&quot;/images/bg_auth.png&quot;); background-repeat: no-repeat; background-position: left top; font-size: 17px; text-align: center; width: 373px; height: 265px; overflow: hidden; font-family: 'lucida grande',Helvetica,Verdana,sans-serif; line-height: 265px;">
<div>
    <div id="widget" class="widget" >
     
      
	 	
	  <div style="margin:0;padding:0; ">
	  <p style="font-size:14px;margin:10px 20px; padding:0;line-height:20px; text-align:left;"><a href="/signup" style="font-size:10px;float:right;">Create YesUp account</a>Sign in using your account with  </p>
      <ul class="providers" >
      <!--  li id="aol" class="on"></li-->
      <li id="yesup" class="on" onclick="location='/login/client';"></li>
      <!--li id="facebook" class=""></li-->
      </ul>
      <ul class="providers col2" >
      <li id="google" class="on" onclick="location='/index/google';"></li>
      <!--li id="openid" class="on"></li-->
      <!--li id="twitter" class="on"></li-->
      </ul>
      
      
      </div>  
      <!-- 
      <div style="clear:both;font-size:14px;margin:0;padding:0;text-align:center;"><a href="/signup">Sign Up</a></div>
      -->
    </div>
</div>
<span style="visibility: hidden;">Loading...</span>
</div>
<img src="/images/close.png" id="close" alt="close" style="position: absolute; top: -4px; right: -4px; cursor: pointer; width: 34px; height: 34px;">
</div>

</div>

</div>